<template>
  <show-box :boxWidth="150">
    <template slot="card-header">
      <h4>员工列表</h4>
    </template>
    <el-radio-group
      v-model="radioVal"
      class="staff_wrap"
      slot="card-body"
      @change="handleRadioChange"
    >
      <el-radio
        v-for="item in sourceList"
        :key="item[sourceProps.key]"
        :label="item[sourceProps.key]"
      >
        <span>{{ item[sourceProps.label] }}</span>
      </el-radio>
    </el-radio-group>
  </show-box>
</template>
<script>
import ShowBox from './ShowBox';
export default {
  components: { ShowBox },
  props: {
    sourceProps: { // props属性
      type: Object,
      default: () => ({
        label: 'userName',
        key: 'jobNumber',
      })
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      radioVal: -1,
      staffMaps: new Map()
    }
  },
  computed: {
    sourceList () {
      this.dataList.forEach(item => {
        this.staffMaps.set(item[this.sourceProps.key], item)
      })
      return [...this.dataList]
    }
  },
  methods: {
    handleRadioChange () {
      const staffInfo = this.staffMaps.get(this.radioVal)
      this.$emit('updateStaffInfo', staffInfo)
    },
    resetState () {
      this.radioVal = -1
      this.$emit('updateStaffInfo', null)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-radio-group {
  display: flex;
  flex-direction: column;
  height: 540px;
  overflow: hidden;
  overflow-y: auto;
}
/deep/ .el-radio {
  margin: 5px 0;
}
</style>
